<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>课程专业管理</title>
		<link rel="icon" href="favicon.ico" type="image/ico">
		<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
		<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
		<meta name="author" content="yinqi">
		<link href="./css/bootstrap.min.css" rel="stylesheet">
		<link href="./css/materialdesignicons.min.css" rel="stylesheet">
		<link rel="stylesheet" href="./css/materialdesign.css" type="text/css">
		<link href="./css/style.min.css" rel="stylesheet">
		<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
		<style type="text/css">
			.rightdiv {
				position: absolute;
				top: 30px;
				width: 83%;
				height: 92%;
				left: 20px;
				list-style: none;
			}
		</style>
	</head>

	<body>
		<div class="col-xs-2, rightdiv">
			<ul id="ztree1" class="ztree"></ul>
			<button type="button" class="layui-btn" id="addZtree" onclick="addZtree()">新增节点</button><br /><br />
			<button type="button" class="layui-btn" id="empty" onclick="empty()">取消选中</button>
		</div>
        
        <script src="js/jquery.min.js"></script>
		<script type="text/javascript" src="./js/jquery.ztree.all.min.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"></script>
		<script type="text/javascript">
			//用来判断选中的节点
				//-1 为未选中状态
				// 0 为选中父节点状态
				// 1 为选中子节点状态
			var parentId = -1;
			var ztreeId = -1;//用来存储选中节点的ID, -1为未选中
			
			layui.use(['laydate', 'form', 'upload', 'element'], function() {
				var laydate = layui.laydate,
					element = layui.element,
					upload = layui.upload,
					form = layui.form;
			})
			
			var zTreeObj;
			var setting = {
				view: {
					enable: true,
					showLine: true,
					removeHoverDom: removeHoverDom,
				},
				async: {
					autoParam: ['pid'],
					url: 'http://localhost:9095/admin/sysSubject/selectSysSubject'
				},
				isSimpleData: false, //数据是否采用简单 Array 格式，默认false
				treeNodeKey: "id", //在isSimpleData格式下，当前节点id属性
				treeNodeParentKey: "pId", //在isSimpleData格式下，当前节点的父节点id属性
				showLine: true, //是否显示节点间的连线
				callback: {
					onDblClick: OnDblClick,
					beforeRemove: beforeRemove,
					onRename: zTreeOnRename,
					onClick: onClick
				},
				edit: {
					enable: true, //单独设置为true时，可加载修改、删除图标
					editNameSelectAll: true,
				},
				data: {
					simpleData: {
						enable: true,
						idKey: "id",
						pIdKey: "pId",
						system: "system",
						rootPId: ""
					}
				},
			};


			function removeHoverDom(treeId, treeNode) {
				$("#diyBtn_" + treeNode.id).unbind().remove();
				$("#diyBtn_space_" + treeNode.id).unbind().remove();
			}


			/*是否点击标志*/
			var clickFlag = null;

			//修改课程专业名称
			function zTreeOnRename(event, treeId, treeNode, isCancel) {
				$.ajax({
					type:"post",
					url:"http://localhost:9095/admin/sysSubject/updateSubject",
					async:true,
					data:{
						'subjectId': treeNode.id,
						'subjectName': treeNode.name
					},
					headers: {
						"token2": $.cookie("token2")
					},
					success:function(data, textStatus, xhr){
						if(textStatus == "success") {
							layer.msg('修改成功', {
								icon: 1,
								time: 1000
							});
							return true;
						} else {
							layer.msg('修改失败', {
								icon: 1,
								time: 1000
							});
							return false;
						}
					}
				});
				
//				$.post('', {
//					'subjectId': treeNode.id,
//					'subjectName': treeNode.name
//				}, function(data, textStatus, xhr) {
//					
//				});
			}

			//双加事件
			function OnDblClick(event, treeId, treeNode) {
				if(clickFlag) { //取消上次延时未执行的方法
					clickFlag = clearTimeout(clickFlag); //清除定时器，防止第二次点击生效
				}
				var treeObj = $.fn.zTree.getZTreeObj("ztree1");
				var sNodes = treeObj.getSelectedNodes();
				treeObj.expandNode(sNodes, false, false, false, false);
			}
			//点击事件
			function onClick(event, treeId, treeNode) {
				ztreeId = treeNode.id;
				$.ajax({
					type:"get",
					url:"http://localhost:9095/admin/sysSubject/selectByPrimaryKey",
					async:true,
					data:{
						"subjectId": treeNode.id
					},
					headers: {
						"token2": $.cookie("token2")
					},
					success: function(msg){
						if (msg.data.parentId==0){//表示选中的是父节点
							parentId = 0;
						} else {
							parentId = 1;
						}
					}
				});
//				$.get("", {
//					"subjectId": treeNode.id
//				}, function(msg) {
//					
//				})
			}
			
			//取消节点选中状态
			function empty(){
				parentId = -1;
				ztreeId = -1;
				var treeObj = $.fn.zTree.getZTreeObj("ztree1");
				var nodes = treeObj.getSelectedNodes();
				if (nodes.length>0) { 
				    treeObj.cancelSelectedNode(nodes[0]);
				}
			}
			
			//新增节点
			function addZtree() {
				if (parentId==1){
					layer.msg('当前节点为子节点,无法进行添加操作', {
						icon: 1,
						time: 1000
					});
					return false;
				}
				layer.prompt({
			        formType: 0,
			        value: '',
			        title: '请输入节点名称'
				}, function(value, index) {
			        if(value.trim().length === 0) {//非空验证
						return false;
			        }
			        layer.close(index);
			        var name = value;
					$.ajax({
						type: "POST",
						async: false,
						url: "http://localhost:9095/admin/sysSubject/addSubject",
						data: {
							"subjectName": name,
							"parentId": ztreeId
						},
						headers: {
							"token2": $.cookie("token2")
						},
						success: function(data) {
							if(data.code == 200) {
								onLoadZTree() //重新加载，不然再次添加会报错
								layer.msg('添加成功', {
									icon: 1,
									time: 1000
								});
							} else {
								onLoadZTree()
								layer.msg('添加失败' + data.msg + '', {
									icon: 5,
									time: 1000
								});
							}
						}
					});
				})
			};
			
			//删除节点
			var treeNodes;
			function beforeRemove(treeId, treeNode) {
				alert(treeNode.id);
				if(treeNode.isParent == true) {
					layer.msg('请首先删除子节点', {
						icon: 5,
						time: 1000
					});
					return false;
				}
				layer.confirm('确认要删除吗？', {
					btn: ['确定', '取消']
				}, function(index) {
					$.ajax({
						type: "POST",
						async: false,
						url: "http://localhost:9095/admin/sysSubject/deleteZtreeId",
						data: {
							"pid": treeNode.id
						},
						headers: {
							"token2": $.cookie("token2")
						},
						success: function(data) {
							if(data.code == 200) {
								onLoadZTree(); //重新加载，不然再次添加会报错
								layer.msg(data.message, {
									icon: 1,
									time: 1000
								});
								return true;
							} else if(data.code==10101){
								onLoadZTree(); //重新加载，不然再次添加会报错
								layer.msg(data.message, {
									icon: 1,
									time: 1000
								});
								return false;
							} else {
								onLoadZTree()
								layer.msg(data.message , {
									icon: 5,
									time: 1000
								});
								return false;
							}
						}
					});
					layer.close(index);
				},
				function() { //取消时刷新tree
					onLoadZTree()
					layer.msg('已取消', {
						icon: 6,
						time: 1000
					});
					return false;
				})
			}
			
			//ztree树的数据查询
			function onLoadZTree() {
				$.ajax({
					async: false, //是否异步
					cache: false, //是否使用缓存
					type: 'GET', //请求方式：post
					url: 'http://localhost:9095/admin/sysSubject/selectSysSubject', //请求的路径
					data: {
						pid: ''
					},
					headers: {
						"token2": $.cookie("token2")
					},
					error: function() { //请求失败处理函数
						alert('请求失败');
					},
					success: function(msg) { //请求成功后处理函数
						console.log(msg);
						treeNodes = eval(msg.data); //把后台封装好的简单Json格式赋给treeNodes
					}
				});
				$.fn.zTree.init($("#ztree1"), setting, treeNodes);
			}
			
			//调用ztree树的显示查询方法
			$(function(){
				onLoadZTree();
			})
		</script>
	</body>

</html>